<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 移动设备 viewport -->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <meta name="author" content="">
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit">
    <!-- 禁止百度SiteAPP转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileColor" content="#62a8ea">

    <script type="text/javascript" src="../res/assets/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../res/assets/js/laydate/laydate.js"></script>
    <script type="text/javascript" src="../res/assets/js/echarts.js"></script>
    <script type="text/javascript" src="../res/assets/js/bootstrap.js"></script>

    <link rel="stylesheet" href="../res/assets/css/bootstrap.css">
    <link rel="stylesheet" href="../res/assets/css/index.css">
</head>
<body>
<div class="test">

    <div class="row">

        <div class="col-sm-6" style="height:100%;width:50%;">
            <div class="main-item view-2 col-sm-12 " style="float: left ;">
                <div class="widget-shadow">
                    <div id="pieChart"  style="height:450px;">
                    </div>
                </div>

            </div>
        </div>

        <div class="col-sm-6">
            <div class="main-item view-2 col-sm-12 " style="float: left ;">
                <div class="widget-shadow">
                    <div id="main" style="height:450px;">
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>


</body>
<script type="text/javascript">
    var monthArray = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];


    var shanghuList = [11, 8, 7, 8.6, 9, 9.5, 9.1, 11, 10, 9.8, 9.3, 10.1];
    var shanghuTotal = 0;

    var kongtiaoList = [7, 6, 6.2, 7.2, 7.5, 7.8, 7.2, 7, 6.9, 7.8, 7.45, 7];
    var kongtiaoTotal = 0;

    var gongquList = [4.7, 4, 3.3, 4.3, 4.1, 4.3, 4.2, 4, 3.9, 4.2, 4.1, 3.9];
    var gongquTotal = 0;


    var diantiList = [0.8, 0.7, 0.71, 0.72, 0.75, 0.73, 0.76, 0.72, 0.77, 0.8, 0.82, 0.74];
    var diantiotal = 0;

    var paishuiList = [1.3, 1.7, 1.5, 1.6, 1.65, 1.62, 1.58, 1.66, 1.52, 1.57, 1.6, 1.68];
    var paishuiTotal = 0;

    var parkList = [1.8, 1.9, 2.0, 1.7, 1.85, 2, 1.9, 1.83, 1.82, 1.9, 1.65, 1.74];
    var parkTotal = 0;

    var other = [1.6, 1.5, 1.2, 1.3, 1.4, 1.6, 1.7, 1.2, 1.4, 1.4, 1.35, 1.37];

    var coloers =['#3366ff', '#00cc99', '#f3a754', '#6699ff', '#926dde', '#cc0033', '#ccccff'];
    var otherTotal = 0;

    var dataList = ['商户用电', '暖通空调', '公区照明', '电梯', '给排水', '停车场', '其他'];

    var totalList = [];


    $(function () {


        totalAccount();

        var myChart = echarts.init(document.getElementById('main'));
        var colors = ['#d14a61', '#5793f3', '#675bba'];//subtext,monthArray,totalSales
        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: dataList
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: '20',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },

            calculable: true,
            xAxis: [
                {
                    axisLine: {onZero: true, onZeroAxisIndex: 1},
                    type: 'category',
                    data: monthArray
                }
            ],
            yAxis: [
                {
                    //设置y轴最大值为数据的1.5倍
                    max: function (value) {
                        return Math.ceil(value.max * 1.3);
                    },
                    splitLine: {show: false},//去除网格线
                    name: '月份项电耗：kwh/m2 ',
                    type: 'value'
                }, {
                    //设置y轴最大值为数据的1.5倍
                    max: function (value) {
                        return Math.ceil(value.max * 1.5);
                    },
                    splitLine: {show: false},//去除网格线
                    type: 'value',
//                min: 0,
//                max: 250,
                    position: 'right',
//                offset: 80,
                    /*axisLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    },*/
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: dataList[0],
                    type: 'bar',
                    stack: '电耗',
                    itemStyle: {
                        normal: {
                            color: coloers[0]
                        }
                    },
                    data: shanghuList
                },
                {
                    name: dataList[1],
                    type: 'bar',
                    stack: '电耗',
                    itemStyle: {
                        normal: {
                            color:coloers[1]
                        }
                    },
                    data: kongtiaoList
                },
                {
                    name: dataList[2],
                    type: 'bar',
                    stack: '电耗',
                    itemStyle: {
                        normal: {
                            color: coloers[2]
                        }
                    },
                    data: gongquList
                },
                {
                    name: dataList[3],
                    type: 'bar',
                    stack: '电耗',
                    smooth: 0.4,//让折线变平滑
                    itemStyle: {
                        normal: {
                            color:coloers[3]
                        }
                    },

                    data: diantiList
                },
                {
                    name: dataList[4],
                    type: 'bar',
                    stack: '电耗',
                    itemStyle: {
                        normal: {
                            color: coloers[4]
                        }
                    },
                    data: paishuiList
                },
                {
                    name: dataList[5],
                    type: 'bar',
                    stack: '电耗',
                    itemStyle: {
                        normal: {
                            color:coloers[5]
                        }
                    },
                    data: parkList
                },
                {
                    name: dataList[6],
                    type: 'bar',
                    stack: '电耗',
                    itemStyle: {
                        normal: {
                            color: coloers[6]
                        }
                    },
                    data: other
                }
            ]
        };
        myChart.setOption(option);


        var pieChart = echarts.init(document.getElementById('pieChart'));
        pieOption = {
            title: {
                text: '全年各分项电耗 (单位：kwh/m2）',
                subtext: '(单位)kwh/m2',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c}kwh/m2 ({d}%)"
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: '50',
                top: 'center',
                feature: {
                    dataView: {show: true, readOnly: false},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: dataList
            },
            series: [
                {
                    name: '全年各分项电耗',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: shanghuTotal.toFixed(2), name: dataList[0]},
                        {value: kongtiaoTotal.toFixed(2), name: dataList[1]},
                        {value: gongquTotal.toFixed(2), name: dataList[2]},
                        {value: diantiotal.toFixed(2), name: dataList[3]},
                        {value: paishuiTotal.toFixed(2), name: dataList[4]},
                        {value: parkTotal.toFixed(2), name: dataList[5]},
                        {value: otherTotal.toFixed(2), name: dataList[6]},
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                    },
                    label: {
                        normal: {
                            formatter: ' {b|{b}：} {c} ({d}%) ',
                            // shadowBlur:3,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            // shadowColor: '#999',
                            // padding: [0, 7],
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                // abg: {
                                //     backgroundColor: '#333',
                                //     width: '100%',
                                //     align: 'right',
                                //     height: 22,
                                //     borderRadius: [4, 4, 0, 0]
                                // },
                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                            }
                        }
                    },
                }
            ],
            color: coloers
        };

        pieChart.setOption(pieOption);


    })


    function totalAccount() {


        $.each(shanghuList, function (indexs, itema) {
            shanghuTotal += shanghuList[indexs]
        });

        $.each(kongtiaoList, function (indexs, itema) {
            kongtiaoTotal += kongtiaoList[indexs]
        });

        $.each(diantiList, function (indexs, itema) {
            diantiotal += diantiList[indexs]
        });

        $.each(paishuiList, function (indexs, itema) {
            paishuiTotal += paishuiList[indexs]
        });

        $.each(parkList, function (indexs, itema) {
            parkTotal += parkList[indexs]
        });

        $.each(gongquList, function (indexs, itema) {
            gongquTotal += gongquList[indexs]
        });

        $.each(other, function (indexs, itema) {
            otherTotal += other[indexs]
        });
        totalList.push(shanghuTotal.toFixed(2))
        totalList.push(kongtiaoTotal.toFixed(2))
        totalList.push(diantiotal.toFixed(2))
        totalList.push(paishuiTotal.toFixed(2))
        totalList.push(parkTotal.toFixed(2))
        totalList.push(gongquTotal.toFixed(2))
        totalList.push(otherTotal.toFixed(2))
    }
</script>
</html>